import 'package:cached_network_image/cached_network_image.dart';
import 'package:du_application/model/CategoryModel.dart';
import 'package:du_application/provide/ClassifyProvider.dart';
import 'package:du_application/provide/setting.dart';
import 'package:du_application/routes/application.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_spinkit/flutter_spinkit.dart';
import 'package:provide/provide.dart';

class ClassifyPage extends StatelessWidget {
const ClassifyPage({Key key}) : super(key: key);

  @override
  Widget  build(BuildContext context) {
    ScrollController scrollController =ScrollController();
    return WillPopScope(
      onWillPop:(){

      },
      child:Provide<ClassProvider>(
        builder: (context,child,index){
return index.classify!=null? Scaffold(
  appBar:AppBar(
     leading:FlatButton(
          onPressed: (){
           Provide.value<SettingProvide>(context).selectBar(0,context);
          },
          child: Icon(Icons.arrow_back),
        ),
    centerTitle: true,
    title: Text(""),
  ),
  body: Container(
         
           child: Row(
             children: <Widget>[
               //左边
           Container(
         width: ScreenUtil().setWidth(180),
         decoration: BoxDecoration(
           border: Border(
             right: BorderSide(width: ScreenUtil().setWidth(1),color: Colors.black12)
           )
         ),
         child: ListView.builder(
           itemCount: index.categoryModel.data.classify.length,
           itemBuilder: (context,item){
             return InkWell(
             onTap: (){
               index.selectCategory(index.categoryModel.data.classify[item].id);
             },
               child: Container(
                  // color: tab[index]?Colors.white:Colors.black12,
                  padding: EdgeInsets.symmetric(vertical: ScreenUtil().setHeight(50)),
                  child: Text(index.categoryModel.data.classify[item].name,textAlign: TextAlign.center,style: TextStyle(
                    color:index.classify.id==index.categoryModel.data.classify[item].id ?Colors.cyan:Colors.black
                  ),)
               ),
             ) ;
           },
         ),
       ),
      // 右边
       Container(
         width: ScreenUtil().setWidth(1080-200),
         child:Center(
           child: ListView(

             controller: scrollController,
             children: <Widget>[
               Row(
                 mainAxisAlignment: MainAxisAlignment.center,
                 children: <Widget>[
                   Text("___",style: TextStyle(
                     color: Colors.grey,
                     
                   ),),
                   Container(
                     padding: EdgeInsets.only(top: ScreenUtil().setHeight(20),left: ScreenUtil().setWidth(30),right: ScreenUtil().setWidth(30)),
                     child: Text(index.classify.name),
                   ),
                   Text("___",style: TextStyle(
                     color: Colors.grey
                   ))
                 ],
               ),
               GridView.builder(
                    controller: scrollController,
                shrinkWrap: true,
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    //横轴元素个数
                    crossAxisCount: 3,
                    //纵轴间距
                    mainAxisSpacing: ScreenUtil.getInstance().setWidth(1),
                    //横轴间距
                    crossAxisSpacing: ScreenUtil.getInstance().setWidth(1),
                    //子组件宽高长度比例
                    childAspectRatio: 1.0),
                 itemCount: index.classify.category.length,
                 itemBuilder: (context,size){
                  return item(context,index.classify.category[size]);
                 },
               )
             ],
           )
         ),
       )
             ],
           ),
         )
):_loadingContainer;

        })
      );  
  }
}


Widget item(context,Category category){
  return Column(
        children: <Widget>[
          Padding(
              padding: EdgeInsets.only(right:  ScreenUtil.getInstance().setWidth(20), left: ScreenUtil.getInstance().setWidth(20)),
              child: GestureDetector(
                onTap: () => {Application.router.navigateTo(context, "/list?id=${category.id}")},
                child: Column(
                  children: <Widget>[
                  Container(
                    height: ScreenUtil.getInstance().setHeight(160),
                    child: AspectRatio(
                      child: CachedNetworkImage(
   
       imageUrl:category.picUrl,

                           fit:BoxFit.fitWidth,
                           placeholder: (context, url) =>
                               Image.asset('assets/loading.jpg'),
                           // print("111");
                         ),
                      aspectRatio: 1 / 1,
                    )
                  ),
                    Text(category.name),
                  ],
                ),
              ))
        ],
      );
}


  // Widget classifyPageLeft(List<Classify> classify) {
  //   return 
  // }

     final _loadingContainer = Container(
      width: ScreenUtil().setHeight(1080),
      height: ScreenUtil().setHeight(1920),
      constraints: BoxConstraints.expand(),
      color: Colors.black,
      child: Center(
        child: Opacity(
          opacity: 0.9,
          child: SpinKitWave(
            color: Colors.white,
            size: 50.0,
          ),
        ),
      ));